<template>
    <div class='pic2 page_w_h'>
        <div class="left">
            <img :src="imgUrl" alt="">
            <span class="jt pointLf" @click="jtFn(-1)">&lt</span>
            <span class="jt pointRt" @click="jtFn(1)">></span>
        </div>
        <div class="right">
            <div class="category">
                <span :class="{ select: category == 0 }" @click="cateFn(0)">全部</span>
                <span :class="{ select: category == 1 }" @click="cateFn(1)">表情包</span>
                <span :class="{ select: category == 2 }" @click="cateFn(2)">美美哒</span>
            </div>
            <ul class="list">
                <li v-for="(item, idx) in pics" :class="{ select: idx == imgIdx }" @click="clickPic(item.url, idx)">
                    <img :src="item.url" alt="">
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import data from '../../assets/data/data'
// const pics = ref(data.newPics)
let category = ref(0)
const pics = computed(() => {
    if (category.value == 0) {
        return data.newPics
    } else {
        return data.newPics.filter(item => item.category == category.value)
    }
})
let imgUrl = ref(pics.value[0].url)
let imgIdx = ref(0)
let picNum = pics.value.length
function clickPic(src, idx) {
    imgUrl.value = src
    imgIdx.value = idx
}

function jtFn(n) {
    let idx = imgIdx.value
    let currIdx = idx + n
    console.log(currIdx);
    if (currIdx <= 0) {
        currIdx = 0
    }
    if (currIdx >= picNum) {
        currIdx = picNum
    }
    imgIdx.value = currIdx
    imgUrl.value = pics.value[currIdx].url
}

function cateFn(c) {
    category.value = c
}
</script>

<style scoped lang='less'>
.pic2 {
    display: flex;

    .left {
        position: relative;
        width: 70%;
        height: 100%;
        text-align: center;
        padding-top: 2.5%;
        background-color: #eee;

        .jt {
            display: inline-block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 60px;
            line-height: 60px;
            font-size: 32px;
            background-color: rgba(200, 200, 200, .5);
            color: white;
            text-align: center;
            cursor: pointer;
        }

        .pointLf {
            left: 0;
        }

        .pointRt {
            right: 0px;
        }

        img {
            height: 95%;
        }
    }

    .right {
        width: 30%;
        height: 100%;
        background: #FFFFE0;

        .category {
            text-align: right;

            span {
                display: inline-block;
                margin-right: 20px;
                padding: 10px;
                font-weight: bold;
                cursor: pointer;
            }

            span.select {
                border-bottom: 1px solid blueviolet;
            }
        }

        .list {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding: 0 10px;
            max-height: calc(100% - 70px);
            overflow: auto;
            flex-wrap: wrap;

            &::after {
                content: "";
                width: 48%;
            }

            li {
                width: 48%;
                height: 200px;
                overflow: hidden;
                border-radius: 5%;
                cursor: pointer;
                border: 4px solid transparent;

                &:hover {
                    border-color: red;
                }

                &.select {
                    border-color: red;
                }

                img {
                    width: 100%;
                    transform: translateY(-25%);
                }
            }
        }
    }
}
</style>